<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/view/common/header.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>模型管理</title>
    <script src="../js/ajaxfileupload.js"></script>
    <script type="text/javascript">


        function imageFormate(value) {
            if (value == null) return "";
            return "<img style='height: 50px;width: 50px;' src='" + value + "'/>";
        }
        function hrefFormate(value) {
            return "<a href='" + value + "'>点击下载</a>";
        }

        //查询
        function search() {
            $('#dg').datagrid('load', {
                name: $("#name").val(),
                category: $("#category").val(),
                brand: $("#brand").val(),
                style: $("#style").val(),
            });
        }

        function openAddDialog(title, url) {
            $("#dlg").dialog("open").dialog("setTitle", title);
            resetValue();
            window.submit_url = url;

            $('#brandId').combobox({
                url: root + '/brand/getBrandList.do',
                valueField: 'brandId',
                textField: 'title'
            });

            $('#categoryId').combotree({
                url: root + '/category/getCategoryTree.do',
                valueField: 'id',
                textField: 'text'
            });
        }


        function openModifyDialog(title, url) {

            $('#brandId').combobox({
                url: root + '/brand/getBrandList.do',
                valueField: 'brandId',
                textField: 'title'
            });

            $('#categoryId').combotree({
                url: root + '/category/getCategoryTree.do',
                valueField: 'id',
                textField: 'text'
            });

            resetValue();
            var selectedRows = $("#dg").datagrid('getSelections');
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择一条要编辑的数据！");
                return;
            }
            var row = selectedRows[0];
            console.log(row);
            $("#dlg").dialog("open").dialog("setTitle", title);
            $('#fm').form('load', row);
            window.submit_url = url;

            $("#picUrlPreview").attr("src", row.picUrl);
            $("#canvasPicPreview").attr("src", row.canvasPic);
            $("#attachementPicPreview").attr("src", row.attachementPic);

        }


        function uploadImage(id, preview) {
            $.ajaxFileUpload({
                url: root + '/file/uploadAnyFile.do',
                type: 'post',
                secureuri: false,             //一般设置为false
                fileElementId: id,    // 上传文件的id、name属性名
                dataType: 'json',             //返回值类型，一般设置为json、application/json
                success: function (res, status) {
                    console.log(res);
                    if (res.code == "0000") {
                        console.log(res.data);
                        console.log(preview);
                        $("#" + preview).attr("src", res.data);
                        $("#" + id + "_value").val(res.data);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (data, status, e) {

                }
            });
        }

        function uploadFile(id) {
            $.ajaxFileUpload({
                url: root + '/file/uploadAnyFile.do',
                type: 'post',
                secureuri: false,             //一般设置为false
                fileElementId: id,    // 上传文件的id、name属性名
                dataType: 'json',             //返回值类型，一般设置为json、application/json
                success: function (res, status) {
                    console.log(res);
                    if (res.code == "0000") {
                        $("#originUrl_text").text(res.data);
                        $("#originUrl_value").val(res.data);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (data, status, e) {

                }
            });
        }


        function mergeRoom() {
            var selectedRows = $("#dg").datagrid('getSelections');
            if (selectedRows.length < 1) {
                $.messager.alert("系统提示", "请选择要合并的模型");
                return;
            }
            console.log(selectedRows);

            $("#dlg-merge").dialog("open");
            $("#merge-form #models-pic").empty();
            var ids = new Array();
            for (var i = 0; i < selectedRows.length; i++) {
                var data = selectedRows[i];
                $("#merge-form #models-pic").append('<li id="' + data.modelId + '"><img src="' + data.canvasPic + '"></li>');
                ids.push(data.modelId);
            }
            ids.join(",");
            $("#merge-form #sample_models").val(ids);
        }

        function saveMerge() {
            $("#merge-form").form("submit", {
                url: root + '/samplehouse/save.do',
                onSubmit: function () {
                    return $(this).form("validate");
                },
                success: function (result) {
                    res = JSON.parse(result);
                    if (res.code == '0000') {
                        $.messager.alert("系统提示", "保存成功", "info", function () {
                            $("#dlg-merge").dialog("close");
                        });
                    } else {
                        $.messager.alert("系统提示", res.msg, "info", function () {
                            $("#dlg-merge").dialog("close");
                        });
                        return;
                    }
                }
            });
        }

        function closeDialogMerge() {
            $("#dlg-merge").dialog("close");
        }

        function getSelectedId() {
            var selectedRows = $("#dg").datagrid('getSelections');
            var ids = new Array();
            for (var i = 0; i < selectedRows.length; i++) {
                var data = selectedRows[i];
                $("#merge-form #models-pic").append('<li id="' + data.modelId + '"><img src="' + data.canvasPic + '"></li>');
                ids.push(data.modelId);
            }
            ids.join(",");
            $("#selectedId").val(ids);
        }


    </script>
</head>
<body style="margin:1px;">
<!-- 工具栏  -->
<div id="tb">
    <div>
        <a href="javascript:openAddDialog('添加模型 ' ,'../model/save.do')" class="easyui-linkbutton" iconCls="icon-add"
           plain="true">新增</a>
        <a href="javascript:openModifyDialog('编辑模型 ' ,'../model/save.do')" class="easyui-linkbutton" iconCls="icon-edit"
           plain="true">修改</a>
        <a href="javascript:deleteById('../model/delete.do')" class="easyui-linkbutton" iconCls="icon-remove"
           plain="true">删除</a>
        <a href="javascript:getSelectedId()" class="easyui-linkbutton" iconCls="icon-add" plain="true">显示当前已勾选模型Id</a>

        <%--<a href="javascript:mergeRoom()" class="easyui-linkbutton" iconCls="icon-add" plain="true">合并到样板间</a>--%>
    </div>
    <div>
        &nbsp;模型名：&nbsp;<input type="text" id="name" size="20" class="easyui-textbox"/>&nbsp;

        &nbsp;类别：&nbsp;<input type="text" id="category" size="20" class="easyui-textbox"/>&nbsp;

        &nbsp;品牌：&nbsp;<input type="text" id="brand" size="20" class="easyui-textbox"/>&nbsp;

        &nbsp;风格：&nbsp;<input type="text" id="style" size="20" class="easyui-textbox"/>&nbsp;

        <a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
    </div>

    <div>
        &nbsp;已勾选的模型Id： <input type="text" id="selectedId" style="width: 1000px"/>
    </div>
</div>

<!-- 查询表单 -->
<table id="dg" title="模型管理" class="easyui-datagrid" pagination="true" pageList="[100,200,500,1000]" pageSize="100"
       rownumbers="true" fit="true"
       url="../model/queryForPage.do" toolbar="#tb">
    <thead>
    <tr>

        <th data-options="field:'id',checkbox:true" align="center"></th>
        <th data-options="field:'modelId'" align="center">模型ID</th>
        <th data-options="field:'title',width:100" align="center">模型名</th>
        <th data-options="field:'picUrl',width:100,formatter:imageFormate" align="center">缩略图</th>
        <th data-options="field:'anchorX',width:100" align="center">轴心X</th>
        <th data-options="field:'anchorY',width:100" align="center">轴心Y</th>
        <th data-options="field:'canvasPic',width:100,formatter:imageFormate" align="center">平面图</th>
        <th data-options="field:'attachementPic',width:100,formatter:imageFormate" align="center">附加贴图</th>
        <th data-options="field:'iRotate',width:100" align="center">是否旋转</th>
        <th data-options="field:'originUrl',width:100,formatter:hrefFormate" align="center">模型地址</th>
        <th data-options="field:'resourceHeight',width:100" align="center">高度</th>
        <th data-options="field:'resourceLength',width:100" align="center">长度</th>
        <th data-options="field:'resourceWidth',width:100" align="center">宽度</th>
        <th data-options="field:'size3d',width:100" align="center">3d缩放xyz</th>
        <th data-options="field:'attachmentType',width:100" align="center">附件类型</th>
        <th data-options="field:'attachementHeight',width:100" align="center">初始高度</th>
        <th data-options="field:'weight',width:100" align="center">重量</th>
        <th data-options="field:'weightUnit',width:100" align="center">重量单位</th>
        <th data-options="field:'price',width:100" align="center">价格</th>
        <th data-options="field:'material',width:100" align="center">材质</th>
        <th data-options="field:'origin',width:100" align="center">产地</th>
        <th data-options="field:'isCommend',width:100" align="center">是否为推荐</th>

    </tr>
    </thead>
</table>


<!-- 合并样板间对话框 -->
<div id="dlg-merge" class="easyui-dialog" style="width: 700px;height:420px;padding: 10px 20px" closed="true"
     buttons="#merge-buttons">
    <form id="merge-form" method="post" novalidate>
        <div class="fitem">
            <label>模型:</label>
            <input name="models" id="sample_models" type="hidden">
            <ul id="models-pic"></ul>
        </div>
        <div class="fitem">
            <label>名称:</label>
            <input name="name" class="easyui-textbox easyui-validatebox" data-options="required:true">
        </div>
        <div class="fitem">
            <label>房屋类别:</label>
            <select id="roomType" name="roomType">
                <option value="厨房"> 厨房</option>
                <option value="客厅"> 客厅</option>
                <option value="餐厅"> 餐厅</option>
                <option value="主卧"> 主卧</option>
                <option value="次卧"> 次卧</option>
                <option value="阳台"> 阳台</option>
                <option value="生活阳台"> 生活阳台</option>
                <option value="储物间"> 储物间</option>
                <option value="卫生间"> 卫生间</option>
                <option value="其它"> 其它</option>
            </select>
        </div>
        <div class="fitem">
            <label>风格:</label>
            <select id="styleId" name="styleId">
                <option value="中式"> 中式</option>
                <option value="日式"> 日式</option>
                <option value="东南亚"> 东南亚</option>
                <option value="欧式"> 欧式</option>
                <option value="法式"> 法式</option>
                <option value="地中海"> 地中海</option>
                <option value="新古典"> 新古典</option>
                <option value="现代简约"> 现代简约</option>
                <option value="乡村田园"> 乡村田园</option>
                <option value="其它"> 其它</option>
            </select>
        </div>
        <div class="fitem">
            <label>样板间图片:</label>
            <input name="files" id="toppic" type="file"/>
            <input id="toppic_value" name="toppic" type="hidden"/>
            <input type="button" value="上传文件" onclick="uploadImage('toppic','toppicPreview');"></input>
        </div>
        <div class="fitem">
            <label>预览图片:</label>
            <img height="400" width="400" id="toppicPreview" src=""/>
        </div>

    </form>
</div>

<!-- 弹出对话框 -->
<div id="dlg" class="easyui-dialog" style="width: 700px;height:420px;padding: 10px 20px" closed="true"
     buttons="#dlg-buttons">
    <form id="fm" method="post" novalidate>
        <span style="color: red">下面是必填(*) </span>
        <hr>
        <input id="modelId" name="modelId" type="hidden"/>
        <div class="fitem">
            <label>品牌:</label>
            <%--<input id="brandId" name="brandId" class="easyui-textbox easyui-validatebox"    style="width:358px" >--%>
            <input id="brandId" class="easyui-combobox" name="brandId"
                   data-options="valueField:'brandId',textField:'title',url:'brand/getBrandList.do'"/>
        </div>

        <div class="fitem">
            <label>类别:</label>
            <input id="categoryId" name="categoryId" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <div class="fitem">
            <label>模型名:</label>
            <input name="title" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>缩略图:</label>
            <input name="files" id="picUrl" type="file"/>
            <input id="picUrl_value" name="picUrl" type="hidden"/>
            <input type="button" value="上传文件" onclick="uploadImage('picUrl','picUrlPreview');"></input>
        </div>

        <div class="fitem">
            <label>预览图片:</label>
            <img height="200" width="200" id="picUrlPreview" src=""/>
        </div>

        <div class="fitem">
            <label>平面图:</label>
            <input name="files" id="canvasPic" type="file"/>
            <input id="canvasPic_value" name="canvasPic" type="hidden"/>
            <input type="button" value="上传文件" onclick="uploadImage('canvasPic','canvasPicPreview');"></input>
        </div>

        <div class="fitem">
            <label>预览图片:</label>
            <img height="200" width="200" id="canvasPicPreview" src=""/>
        </div>


        <div class="fitem">
            <label>模型:</label>
            <input name="files" id="originUrl" type="file"/>
            <input id="originUrl_value" name="originUrl" type="hidden"/>
            <input type="button" value="上传文件" onclick="uploadFile('originUrl')"></input>
            <div><span>模型下载地址:</span> <span id="originUrl_text"> </span></div>
        </div>

        <div class="fitem">
            <label>附件类型 :</label>
            <select name="attachmentType" style="width:358px">
                <option value="-1"> Floor</option>
                <option value="0">Wall</option>
                <option value="1">Ceiling</option>
                <option value="2">Desktop</option>
                <option value="3">Blanket</option>
                <option value="4">FloorTexture</option>
                <option value="5">WallTexture</option>
                <option value="6">Door</option>
                <option value="7">Win</option>
                <option value="8">Pillar</option>
                <option value="9">WallOpen</option>
                 <option value="10">Free</option>
            </select>
        </div>
        <div class="fitem">
            <label>初始高度:</label>
            <input name="attachementHeight" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <div class="fitem">
            <label>高度(米):</label>
            <input name="resourceHeight" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>长度(米):</label>
            <input name="resourceLength" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>宽度(米):</label>
            <input name="resourceWidth" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>3d缩放xyz:</label>
            <input name="size3d" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <span>下面是可选</span>
        <hr>


        <div class="fitem">
            <label>子组件Ids(请从查询页面获取id已逗号隔开):</label>
            <input name="childIds" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <div class="fitem">
            <label>附加贴图:</label>
            <input name="files" id="attachementPic" type="file"/>
            <input id="attachementPic_value" name="attachementPic" type="hidden"/>
            <input type="button" value="上传文件" onclick="uploadImage('attachementPic','attachementPicPreview');"></input>
        </div>

        <div class="fitem">
            <label>预览图片:</label>
            <img height="200" width="200" id="attachementPicPreview" src=""/>
        </div>


        <div class="fitem">
            <label>轴心X:</label>
            <input name="anchorX" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>轴心Y:</label>
            <input name="anchorY" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>是否旋转:</label>
            <input name="iRotate" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <div class="fitem">
            <label>重量:</label>
            <input name="weight" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>重量单位:</label>
            <input name="weightUnit" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>价格:</label>
            <input name="price" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>材质:</label>
            <input name="material" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>产地:</label>
            <input name="origin" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>
        <div class="fitem">
            <label>是否为推荐:</label>
            <input name="isCommend" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <div class="fitem">
            <label>平台:</label>
            <input name="platform" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

        <div class="fitem">
            <label>附加信息:</label>
            <input name="extendInfo" class="easyui-textbox easyui-validatebox" style="width:358px">
        </div>

    </form>
</div>


<!-- 保存和关闭按钮 -->
<div id="dlg-buttons">
    <a href="javascript:save()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>


<div id="merge-buttons">
    <a href="javascript:saveMerge()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeDialogMerge()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>

</body>
</html>